<template>
  <div class="quick_user">
    <el-row style="margin-top: 10px;height: 75px;overflow: hidden">
      <el-col :span="7" style="height: 75px;overflow: hidden">
        <el-avatar shape="square" style="width: 75px;height:75px" :src="usreimg?usreimg:imgsrc" fit="contain  "></el-avatar>
      </el-col>
      <el-col :span="17">
        <el-row>
          <el-col :span="24" style="display: flex;align-items: center">
            <span style="font-size: 14px">{{ usermingzi?usermingzi:username }}</span>
            <span :style="{'margin-left': '10px','width':' 30px','height': '16px','display': 'inline-block','background':'url('+lv+') 0 0/contain no-repeat'}"></span>
          </el-col>
          <el-col :span="24">
            <small>UID:{{ userid }}</small>
          </el-col>
          <el-col :span="24">
            <el-tooltip class="item" effect="dark" content="我跑到下面的个人信息里咯" placement="bottom-start">
              <el-button type="primary" plain style="padding: 2px 10px 2px 2px;border: 0px;line-height: 30px;">
                <i class="el-icon-s-claim" style="padding: 5px 8px" v-if="sign"></i>
                <i class="el-icon-check" style="padding: 5px 8px" v-else></i>
                {{!sign?'已签到':'签到'}}</el-button>
            </el-tooltip>
            <el-button type="primary" plain style="padding: 2px 10px 2px 2px;border: 0px;line-height: 30px;" @click="userexit">
              <i class="glyphicon glyphicon-log-out" style="padding: 5px 8px"></i>退出</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <van-divider dashed/>
<!--    用户余额-->
    <van-cell title="当前余额：" icon="gold-coin" :border="false" value-class="color" :value="'￥' +useryue" />
    <van-cell title="联系QQ：" icon="chat" :border="false" :value="userlxfs" />
    <van-cell title="邮箱地址：" icon="invitation" :border="false" :value="useremail" />
    <el-link :underline="false" @click="personal" style="font-size: 1rem;">
      <el-row  style="margin: 10px 0;width: 151px;">
        <el-col :span="7"><van-icon name="records" size="20" style="background-color: #F3F6F9;padding: 9px;border-radius: 0.42rem;margin-right: 5px;color: #FF5500" /></el-col>
        <el-col :span="17" style="margin: 2px 0">个人信息</el-col>
        <el-col :span="17" style="color: #B5B5C3">账户设置和更多</el-col>
      </el-row>
    </el-link>
    <br>
    <el-link :underline="false" style="font-size: 1rem;" @click="bill">
      <el-row  style="margin: 10px 0;width: 151px;">
        <el-col :span="7"><van-icon name="bill-o" size="20" style="background-color: #F3F6F9;padding: 9px;border-radius: 0.42rem;margin-right: 5px;color: #FF5500" /></el-col>
        <el-col :span="17" style="margin: 2px 0">余额账单</el-col>
        <el-col :span="17" style="color: #B5B5C3">余额变动记录</el-col>
      </el-row>
    </el-link>
    <br>
    <el-link :underline="false" style="font-size: 1rem;" @click="chongzhi">
      <el-row  style="margin: 10px 0;width: 151px;">
        <el-col :span="7"><van-icon name="balance-pay" size="20" style="background-color: #F3F6F9;padding: 9px;border-radius: 0.42rem;margin-right: 5px;color: #FF5500" /></el-col>
        <el-col :span="17" style="margin: 2px 0">充值余额</el-col>
        <el-col :span="17" style="color: #B5B5C3">请保持余额充足</el-col>
      </el-row>
    </el-link>
    <br>
    <el-link :underline="false" style="font-size: 1rem;" @click="changepassword">
      <el-row  style="margin: 10px 0;width: 151px;">
        <el-col :span="7"><van-icon name="edit" size="20" style="background-color: #F3F6F9;padding: 9px;border-radius: 0.42rem;margin-right: 5px;color: #FF5500" /></el-col>
        <el-col :span="17" style="margin: 2px 0">修改密码</el-col>
        <el-col :span="17" style="color: #B5B5C3">需知旧密码</el-col>
      </el-row>
    </el-link>
    <br>
  </div>
</template>

<script>
import {mapState} from "vuex"
import userimg from "@/assets/userAvatar.png"
export default {
  name: "QuickUser",
  data() {
    return {
      imgsrc: userimg,
      lv:''
    }
  },
  methods: {
    userexit() {
      this.$emit('quickuserhide');
      this.$store.commit('setDlzt');
      this.$toast.success("退出成功");
      this.$router.push("/login");
      localStorage.removeItem("userToken");
    },
    personal() {
      this.$emit('quickuserhide');
      /*this.$router.push('/user/personal')*/
      window.location.href = window.location.origin+'/user/personal'
    },
    changepassword() {
      this.$emit('quickuserhide');
      this.$router.push('/changegassword')
    },
    chongzhi() {
      this.$emit('quickuserhide');
      this.$router.push('/user/pay')
    },
    bill(){
      this.$emit('quickuserhide');
      this.$router.push('/user/userbill')
    }
  },
  computed: {
    ...mapState([
      "userid", "useryue", "userlxfs", "username", "usermingzi", "usreimg", 'useremail' ,"userlv", 'sign'
    ])
  },
  created() {
    this.lv = require('../assets/lv'+(this.userlv-0+1)+'.png')
  }
}
</script>

<style scoped>
.quick_user{

}
.van-cell--borderless{
  padding: 10px 0px;
}
.color{
  color: #ff0000;
}
</style>
